<template>
    <div class="online-mall">
        <template
            v-for="(item, index) in formData"
            :key="index"
        >
            <van-card
                :price="item.price"
                :desc="item.desc"
                :title="item.title"
                :thumb="item.thumb"
                lazy-load
            >
                <template #footer>
                    <van-stepper 
                        v-model="item.stepNum" 
                        integer 
                        default-value="0"
                        min="0"
                        @change="onStepChange"
                    />
                </template>
            </van-card>
        </template>
        <!-- 价格单位为分，所以要*100 -->
        <van-submit-bar 
            :price="totalAmount * 100"
            button-text="提交订单" 
            placeholder
            :disabled="totalNum == 0"
            @submit="onSubmit" 
        >
            <template #default>
                <van-badge 
                    :content="totalNum" 
                    position="top-left"
                    @click="totalNum > 0 ? showBottom=true : ''"
                >
                    <van-icon 
                        name="shopping-cart" 
                        color="#1989fa" 
                        size="8vw"
                    />
                </van-badge>
            </template>
        </van-submit-bar>

        <!-- 购物车弹出层 -->
        <van-popup
            v-model:show="showBottom"
            position="bottom"
            round
            :style="{ height: '50%' }"
        >
            <template
                v-for="(item, index) in formData"
                :key="index"
            >
                <van-card
                    v-if="item.stepNum > 0"
                    :price="item.price"
                    :desc="item.desc"
                    :title="item.title"
                    :thumb="item.thumb"
                    lazy-load
                >
                    <template #footer>
                        <van-stepper 
                            v-model="item.stepNum" 
                            integer 
                            default-value="0"
                            min="0"
                            @change="onStepChange"
                        />
                    </template>
                </van-card>
            </template>
        </van-popup>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onBeforeUnmount } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showConfirmDialog, showLoadingToast, closeToast, showFailToast } from 'vant'
    import { useStore } from '@/store'

    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    const showBottom: Ref<boolean> = ref(false)
    const formData: Ref<any> = ref([
        {
            stepNum: 0,
            title: '商品标题',
            price: '2.00',
            desc: '已售99+',
            thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
        },
        {
            stepNum: 0,
            title: '商品标题',
            price: '2.00',
            desc: '已售99+',
            thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
        },
        {
            stepNum: 0,
            title: '商品标题',
            price: '2.00',
            desc: '已售99+',
            thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
        }
    ])
    const totalAmount: Ref<number> = ref(0) //总选择金额
    const totalNum: Ref<number> = ref(0) //总选择商品种类
    const onStepChange = (val) => {
        totalAmount.value = 0
        totalNum.value = 0
        formData.value.forEach((item, index) => {
            if (item.stepNum > 0) {
                totalNum.value++
                totalAmount.value += item.price * item.stepNum
            }
        });
        if (totalNum.value == 0) {
            showBottom.value = false
        }
    }
    const onSubmit = () => {
        console.log('submit')
        showLoadingToast({
            message: '加载中...',
            overlay: true,
            forbidClick: true,
            duration: 0
        })
        // 调接口
        showDialog({
            title: '提示',
            message: '提交成功！',
        }).then(() => {

        });
        closeToast()

    }
    
</script>
<style lang="scss" scoped>
    .online-mall {
        display: flex;
        flex-direction: column;
        // height: 100vh;
        // overflow: hidden;
        // background-image: url('@/assets/bg/bg10.png');
        // background-size: 100% 100%;
    }
    
</style>